<template>
  <div
    v-if="visible"
    class="gis-name-setting position-right"
    :class="{
      'top-margin': topMargin,
    }"
    @click.stop="UpSysPanel()"
  >
    <!-- <div class="header">
      <div class="panel-title">设置</div>
      <div class="close-icon" @click="closeSet">
        <a-icon-font type="iconicon-beifen1" />
      </div>
    </div> -->
    <div class="setting-body">
      <div class="setting-item">
        <span>实体名称：</span>
        <a-select
          :value="nameSet"
          size="small"
          style="width: 97px;"
          @change="onNameSetChange"
        >
          <a-select-option
            v-for="(item, index) in nameSetList"
            :key="index"
            :value="item.value"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </div>

      <div class="split-line"></div>

      <a-checkbox
        :checked="interactGraph"
        class="setting-item"
        @change="interactChange"
      >
        与知识图谱同步
      </a-checkbox>
    </div>
  </div>
</template>

<script lang="ts">
/**
 * 搜索地图
 */
import { Component, Vue, Prop } from 'vue-property-decorator'
import KGraphStore from '@/store/modules/k-graph'

@Component({
  components: {},
})
export default class EntityNameSet extends Vue {
  @Prop({ type: Boolean, default: false }) visible!: boolean
  @Prop({ type: String, default: 'abbr' }) nameSet!: string
  @Prop({ type: Boolean, default: true }) interactGraph!: boolean
  @Prop({ type: Boolean, default: false }) topMargin!: boolean //  是否需要顶部margin的补偿

  public nameSetList = [
    {
      name: '显示简称',
      value: 'abbr',
    },
    {
      name: '显示全称',
      value: 'full',
    },
    {
      name: '隐藏',
      value: 'hide',
    },
  ]

  public onNameSetChange(value: any) {
    this.$emit('name-set-change', value)
  }

  public interactChange(event: any) {
    this.$emit('interact-graph-change', event.target.checked)
  }

  public closeSet() {
    KGraphStore.setCurrentToolBarAction(null)
  }

  public UpSysPanel() {
    //  set focus box
    KGraphStore.setFocusBoxg('sys')
  }
}
</script>

<style scoped lang="less">
.position-right {
  right: 100px;
}

.gis-name-setting.top-margin {
  top: 39px;
}

.gis-name-setting {
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.18);
  position: absolute;
  top: 1px;
  width: 196px;
  z-index: 800;

  .header {
    align-items: center;
    border-bottom: 1px solid #e9e9e9;
    // cursor: grab;
    display: flex;
    justify-content: space-between;
    padding: 9px 12px;
  }

  .close-icon {
    align-items: center;
    border-radius: 2px;
    color: rgb(93, 99, 126);
    cursor: pointer;
    display: flex;
    font-size: 16px;
    padding: 4px;
    position: relative;
    user-select: none;
  }

  .setting-body {
    .setting-item {
      margin: 12px;
    }

    .split-line {
      border-top: 1px solid #e9e9e9;
      height: 1px;
      left: 0;
      margin: 0;
      width: 100%;
    }
  }
}
</style>
